<template>
  <div class="hot">
    <div class="banner">
      <van-swipe :autoplay="3000"
                 indicator-color="white">
        <van-swipe-item v-for="(image, index) in swipeImgs"
                        :key="index"
                        @click="handleImgPreview(index)">
          <img :src="image"
               alt=""
               width="100%"
               height="100%">
        </van-swipe-item>
      </van-swipe>
    </div>
    <div class="swiper-container"
         ref="swiperContainer">
      <div class="swiper-wrapper">
        <div class="swiper-slide"
             v-for="(item,index) in categorys.page"
             :key="index">
          <van-grid :column-num="4"
                    clickable>
            <van-grid-item v-for="value in categorys[categorys.page[index]]"
                           :key="value.id"
                           :icon="value.img"
                           :text="value.title" />
          </van-grid>
        </div>
      </div>
      <div class="swiper-scrollbar"></div>
    </div>
    <van-card v-for="item in goods"
              :key="item.id"
              :tag="item.tag"
              :price="item.price"
              :desc="item.desc"
              :title="item.title"
              :thumb="item.thumb"
              @click="handleGoodsDetail(item.id)">
      <div slot="tags">
        <van-tag round
                 type="warning">{{item.goodTypeName}}</van-tag>
      </div>
      <div slot="footer">
        <!-- <van-stepper v-model="value" /> -->
        <p>{{item.num}}人付款</p>
      </div>
    </van-card>
  </div>
</template>

<script>
import { ImagePreview } from 'vant';
export default {
  name: 'hot',
  data () {
    return {
      swipeImgs: ['//t00img.yangkeduo.com/goods/images/2019-09-10/c46ff8005eefe8fe1153c42fac16c78e.png?imageMogr2/format/webp/quality/50',
        '//t00img.yangkeduo.com/goods/images/2019-08-30/d3c4b253-40b2-4670-9a7c-c2aad1e7c7a8.png?imageMogr2/format/webp/quality/50',
        '//t16img.yangkeduo.com/pdd_oms/2019-09-09/f4bb505c6fc95e73897c4241262d81a6.png?imageMogr2/format/webp/quality/50',
        '//t16img.yangkeduo.com/pdd_oms/2019-06-30/3b089c428045b0506d76f0ae10fa2971.jpg?imageMogr2/format/webp/quality/50'],
      categorys: {
        page: ['page1', 'page2'],
        page1: [
          { id: 1, title: '限时秒杀', linkTo: '', img: '//t07img.yangkeduo.com/images/2018-05-16/26c916947489c6b2ddd188ecdb54fd8d.png?imageMogr2/format/webp/quality/50' },
          { id: 2, title: '断码清仓', linkTo: '', img: '//t00img.yangkeduo.com/goods/images/2018-12-22/b9851773573d1d682aa46d896de7f4fa.png?imageMogr2/format/webp/quality/50' },
          { id: 3, title: '品牌馆', linkTo: '', img: '//t00img.yangkeduo.com/goods/images/2018-08-29/119a4937b493cc0fcc968a4545657922.png?imageMogr2/format/webp/quality/50' },
          { id: 4, title: '多多果园', linkTo: '', img: '//t00img.yangkeduo.com/goods/images/2019-01-30/5667b3f1eaa8bb379303afb3934d1bc8.png?imageMogr2/format/webp/quality/50' },
          { id: 5, title: '9块9特卖', linkTo: '', img: '//t00img.yangkeduo.com/goods/images/2019-08-08/e8cb0bbd39355543de0825c9590f74ca.gif' },
          { id: 6, title: '助力享免单', linkTo: '', img: '//t00img.yangkeduo.com/goods/images/2019-02-15/b329c4673337e18030f1211df38a543b.png?imageMogr2/format/webp/quality/50' },
          { id: 7, title: '天天领现金', linkTo: '', img: '//t10img.yangkeduo.com/images/2018-05-16/712fc1e7f4f7b0572257ef162b5185a9.png?imageMogr2/format/webp/quality/50' },
          { id: 8, title: '1分抽大奖', linkTo: '', img: '//t05img.yangkeduo.com/images/2018-05-04/c71c9acd8b48203a704f6c0951caddc0.png?imageMogr2/format/webp/quality/50' },
        ],
        page2: [
          { id: 1, title: '省钱月卡', linkTo: '', img: '//t00img.yangkeduo.com/goods/images/2019-01-27/76826abcd09fe76657f07a901db83698.png?imageMogr2/format/webp/quality/50' },
          { id: 2, title: '充值中心', linkTo: '', img: '//t05img.yangkeduo.com/images/2018-05-16/801ae189938526cdaf40935d07034c5e.png?imageMogr2/format/webp/quality/50' },
          { id: 3, title: '百亿补贴', linkTo: '', img: '//t00img.yangkeduo.com/goods/images/2019-06-13/d3fd3a5b187bca651f8e65ae8a25c296.png?imageMogr2/format/webp/quality/50' },
          { id: 4, title: '现金签到', linkTo: '', img: '//t01img.yangkeduo.com/images/2018-05-16/c2ba677bcd16ecad6c335e5e04a1cf1e.png?imageMogr2/format/webp/quality/50' },
          { id: 5, title: '金猪赚大钱', linkTo: '', img: '//t00img.yangkeduo.com/goods/images/2019-02-05/1351e256a0319a6885761b937d06d581.png?imageMogr2/format/webp/quality/50' },
          { id: 6, title: '电器城', linkTo: '', img: '//t00img.yangkeduo.com/goods/images/2018-10-28/27e48ad452991eeb8fd0559a0d3b60ff.png?imageMogr2/format/webp/quality/50' },
          { id: 7, title: '爱逛街', linkTo: '', img: '//t03img.yangkeduo.com/images/2018-05-16/a666ac01e718dd06231a722baa6fa935.png?imageMogr2/format/webp/quality/50' },
          { id: 8, title: '每日好店', linkTo: '', img: '//t00img.yangkeduo.com/goods/images/2019-02-15/1ddd6e21a8281e794dec6ef736867290.png?imageMogr2/format/webp/quality/50' },
        ]
      },
      goods: [
        {
          id: '1',
          num: 0,
          tag: '',
          price: '4056',
          desc: "【二手9成新】Apple iPhone X 苹果x 二手手机（送一年碎屏险） 深空灰 64G 全网通",
          title: "iPhone X",
          thumb: "https://img12.360buyimg.com/mobilecms/s140x140_jfs/t1/72565/37/9872/157245/5d775ab3Ef827c296/791c309ad672fa2c.png.webp",
          originPrice: "5999",
          goodTypeName: "手机"
        },
        {
          id: '2',
          num: 100,
          tag: '促销',
          price: '2.00',
          desc: "男士衬衫",
          title: "内衣",
          thumb: "https://img13.360buyimg.com/mobilecms/s140x140_jfs/t1/57244/5/9938/80296/5d71bc5fEdbe7d7f1/e12a150ace591686.png.webp",
          originPrice: "10.00",
          goodTypeName: "男装"
        },
        {
          id: '3',
          num: 5,
          tag: '',
          price: '2.00',
          desc: "戴尔DELLXPS13.3英寸英特尔酷睿i5超轻薄窄边框笔记本电脑(i5-8250U 8G 256G PCIe 72色域 背光 2年全智)银",
          title: "戴尔笔记本",
          thumb: "https://img13.360buyimg.com/jdcms/s300x300_jfs/t1/28052/24/6184/422897/5c4ab977Ee44b0130/388394b5577cf7df.jpg.webp",
          originPrice: "10.00",
          goodTypeName: "电脑"
        },
        {
          id: '4',
          num: 70,
          tag: '促销',
          price: '2.00',
          desc: "男士衬衫",
          title: "内衣",
          thumb: "https://img.yzcdn.cn/vant/t-thirt.jpg",
          originPrice: "10.00",
          goodTypeName: "男装"
        },
        {
          id: '5',
          num: 168,
          tag: '促销',
          price: '4090',
          desc: "微星（MSI）MPG Z390 GAMING PRO CARBON 暗黑板主板+英特尔（Intel） i7-9700K 酷睿八核 CPU 板U套装",
          title: " i7-9700K CPU",
          thumb: "https://img12.360buyimg.com/jdcms/s300x300_jfs/t27091/115/2577132710/306881/247bd325/5c06243eN7edaa545.jpg.webp",
          originPrice: "4090",
          goodTypeName: "电脑"
        }
      ]
    }
  },
  components: {

  },
  mounted () {
    const ele = this.$refs.swiperContainer;
    // eslint-disable-next-line no-undef
    var mySwiper = new Swiper(ele, {
      freeMode: true,
      scrollbar: {
        el: '.swiper-scrollbar',
      }
    });
    mySwiper.scrollbar.$el.css('width', '85px');
    mySwiper.scrollbar.$dragEl.css('background', '#ff6600');
    mySwiper.scrollbar.updateSize();
  },
  methods: {
    handleImgPreview (index) {
      ImagePreview({
        images: this.swipeImgs,
        startPosition: index,
        onClose () {
          // do something
        }
      });
    },
    /* 跳转到商品明细页面 */
    handleGoodsDetail (id) {
      this.$router.push({
        name: 'goodsDetail',
        params: { id: id }
      })
    }
  }
}
</script>

<style scoped lang="css">
.hot {
  margin-bottom: 120px;
}
.banner {
  height: 280px;
  overflow: hidden;
}

/* 滚动条居中 */
.swiper-container-horizontal > .swiper-scrollbar {
  left: 50%;
  transform: translateX(-50%);
}
</style>
